<template>
  <div class="merak-container-has-aside" curPageName="employee-info">
    <div class="merak-aside">
      <!-- <MerakIcon size="20" pointer @click="back">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
          <path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" />
        </svg>
      </MerakIcon> -->
      <div class="merak-overflow-y">
        <el-skeleton :loading="loading" animated>
          <template #template>
            <div class="employee">
              <el-skeleton-item variant="circle" style="width: 90px; height: 90px" />
              <div class="employee-name">
                <el-skeleton-item variant="h1" style="width: 80px" />
              </div>
              <div class="employee-job">
                <el-skeleton-item variant="text" style="width: 120px" />
              </div>
              <div class="employee-info">
                <div style="width: 100%; text-align: center">
                  <el-skeleton-item variant="text" style="width: 60px" />
                </div>
                <el-skeleton-item variant="text" style="width: 60px" />
                <el-skeleton-item variant="text" style="width: 60px" />
              </div>
              <div class="employee-menu">
                <el-skeleton-item variant="text" style="width: 100%; height: 37px" />
                <el-skeleton-item variant="text" style="width: 100%; height: 37px" />
                <el-skeleton-item variant="text" style="width: 100%; height: 37px" />
                <el-skeleton-item variant="text" style="width: 100%; height: 37px" />
              </div>
            </div>
          </template>
          <div class="employee">
            <el-avatar :size="90" :src="payload.avatar" />
            <div class="employee-name">
              <span>{{ payload.employee_name }}</span>
              <MerakIcon size="14" :color="payload.sex === 0 ? '#FF619A' : '#0BADEC'">
                <template v-if="payload.sex === 0">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path
                      d="M12,4A6,6 0 0,1 18,10C18,12.97 15.84,15.44 13,15.92V18H15V20H13V22H11V20H9V18H11V15.92C8.16,15.44 6,12.97 6,10A6,6 0 0,1 12,4M12,6A4,4 0 0,0 8,10A4,4 0 0,0 12,14A4,4 0 0,0 16,10A4,4 0 0,0 12,6Z"
                    />
                  </svg>
                </template>
                <template v-else>
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path
                      d="M9,9C10.29,9 11.5,9.41 12.47,10.11L17.58,5H13V3H21V11H19V6.41L13.89,11.5C14.59,12.5 15,13.7 15,15A6,6 0 0,1 9,21A6,6 0 0,1 3,15A6,6 0 0,1 9,9M9,11A4,4 0 0,0 5,15A4,4 0 0,0 9,19A4,4 0 0,0 13,15A4,4 0 0,0 9,11Z"
                    />
                  </svg>
                </template>
              </MerakIcon>
            </div>
            <div v-if="!!orgText.length" class="employee-job">
              <div v-for="item in orgText" class="employee-job-item">{{ item }}</div>
            </div>
            <div class="employee-info">
              <div class="employee-info-tag">
                <MerakIcon size="14" color="#646567">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path
                      d="M12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5M12,2A7,7 0 0,1 19,9C19,14.25 12,22 12,22C12,22 5,14.25 5,9A7,7 0 0,1 12,2M12,4A5,5 0 0,0 7,9C7,10 7,12 12,18.71C17,12 17,10 17,9A5,5 0 0,0 12,4Z"
                    />
                  </svg>
                </MerakIcon>
                <span>{{ payload.office_location_id }}</span>
              </div>
              <div class="employee-info-tag">
                <MerakIcon size="14" color="#646567">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path
                      d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z"
                    />
                  </svg>
                </MerakIcon>
                <span>{{ payload.mobile }}</span>
              </div>
              <div class="employee-info-tag">
                <MerakIcon size="14" color="#646567">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path
                      d="M19,19H5V5H19M19,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M16.5,16.25C16.5,14.75 13.5,14 12,14C10.5,14 7.5,14.75 7.5,16.25V17H16.5M12,12.25A2.25,2.25 0 0,0 14.25,10A2.25,2.25 0 0,0 12,7.75A2.25,2.25 0 0,0 9.75,10A2.25,2.25 0 0,0 12,12.25Z"
                    />
                  </svg>
                </MerakIcon>
                <span>{{ payload.job_no }}</span>
              </div>
            </div>
            <div class="employee-menu">
              <div
                :class="['employee-menu-item', { 'employee-menu-active': active === ComponentKeys.user }]"
                @click="active = ComponentKeys.user"
              >
                {{ $t("staff_list.personal_info") }}
              </div>
              <div
                :class="['employee-menu-item', { 'employee-menu-active': active === ComponentKeys.newsletter }]"
                @click="active = ComponentKeys.newsletter"
              >
                {{ $t("staff_list.newsletter_info") }}
              </div>
              <div
                v-if="payload.nationality === 'china'"
                :class="['employee-menu-item', { 'employee-menu-active': active === ComponentKeys.education }]"
                @click="active = ComponentKeys.education"
              >
                {{ $t("staff_list.education_info") }}
              </div>
              <div
                :class="['employee-menu-item', { 'employee-menu-active': active === ComponentKeys.job }]"
                @click="active = ComponentKeys.job"
              >
                {{ $t("staff_list.on_the_job_info") }}
              </div>
              <div
                :class="['employee-menu-item', { 'employee-menu-active': active === ComponentKeys.contract }]"
                @click="active = ComponentKeys.contract"
              >
                {{ $t("staff_list.contract_info") }}
              </div>
              <div
                :class="['employee-menu-item', { 'employee-menu-active': active === ComponentKeys.annex }]"
                @click="active = ComponentKeys.annex"
              >
                {{ $t("staff_list.material_attachments") }}
              </div>
            </div>
          </div>
        </el-skeleton>
      </div>
    </div>
    <div v-waterMarker class="merak-card">
      <template v-if="active === ComponentKeys.annex">
        <AnnexForm />
      </template>
      <template v-else-if="active === ComponentKeys.contract">
        <Agreement />
      </template>
      <template v-else-if="!!active">
        <component :is="Components[active]" :key="active" :type="active" @renew="handleRenew" />
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { MerakXFormItemOption } from "@/components/MerakXFormItem";

import { ref, reactive, computed, provide, onMounted } from "vue";

import { useRoute } from "vue-router";

import { ElAvatar, ElSkeleton, ElSkeletonItem } from "element-plus";

import MerakIcon from "@/components/MerakIcon/index.vue";

import BaseForm from "./components/BaseForm.vue";
import Agreement from "./components/Agreement.vue";
import AnnexForm from "./components/AnnexForm.vue";

import { ResultEnum } from "@/enums/httpEnum";
import { UserAuthType, getUserAuth } from "@/api/modules/user";
import { TreeOptionType, getOrgTreeOptions, getPersonnelCard } from "@/api/modules/sysManage/personnel";

import { ComponentKeys } from "./formItems";

const Components = {
  [ComponentKeys.user]: BaseForm,
  [ComponentKeys.newsletter]: BaseForm,
  [ComponentKeys.education]: BaseForm,
  [ComponentKeys.job]: BaseForm
};

const route = useRoute();

const loading = ref(false);

const active = ref<ComponentKeys>();

const auth = ref<UserAuthType>({});

const orgOptions = reactive<MerakXFormItemOption[]>([]);

const payload = reactive<Record<string, any>>({});

const orgText = computed(() => (!!payload?.org_title ? payload.org_title.split(",") : []));

const handleRenew = (data: Record<string, any>) => {
  Object.assign(payload, data);
};

provide("auth", auth);
provide("orgOptions", orgOptions);

onMounted(async () => {
  const { id, type } = route.query;
  if (!!type) {
    active.value = type as ComponentKeys;
  }
  if (!!id) {
    loading.value = true;
    await getPersonnelCard(id as string).then(({ code, data }) => {
      if (code == ResultEnum.SUCCESS) {
        for (let key of Object.keys(data)) {
          payload[key] = data[key];
        }
      }
    });
    loading.value = false;
  }
  getUserAuth("staffList").then(({ code, data }) => {
    if (code == ResultEnum.SUCCESS) {
      auth.value = { ...(data ?? {}) };
      // return Object.assign(auth, data);
    }
  });
  getOrgTreeOptions().then(({ code, data }) => {
    if (code === ResultEnum.SUCCESS) {
      const generate = (list: TreeOptionType[], parentId?: string) => {
        const arr: MerakXFormItemOption[] = [];
        for (let item of list) {
          const payload: MerakXFormItemOption = {
            value: `${!!parentId ? parentId + "-" : ""}${item.key}`,
            label: item.value
          };
          if (!!item.sublevel?.length) {
            payload.children = generate(item.sublevel, payload.value as string);
          }
          arr.push(payload);
        }
        return arr;
      };
      orgOptions.push(...generate(data));
    }
  });
});
</script>

<style scoped lang="scss">
.employee {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: var(--merak-text-size);
}

.employee-name {
  display: flex;
  align-items: center;
  margin-top: var(--merak-space);
  & > span {
    margin-right: var(--merak-button-icon-padding);
    font-size: 18px;
    font-weight: 500;
    text-align: center;
  }
}

.employee-job {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 16px;
  padding: 6px 20px;
  color: var(--el-color-primary);
  background-color: var(--el-color-primary-light-9);
  border-radius: var(--merak-rounded);
  box-sizing: border-box;
  &-item {
    & > :not(:first-child) {
      margin-left: 12px;
      position: relative;
      &::before {
        content: "";
        position: absolute;
        top: 10px;
        left: -7px;
        width: 1px;
        height: 16px;
        background-color: var(--el-color-primary);
        transform: translateY(-50%);
      }
    }
  }
}

.employee-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: var(--merak-padding);
  gap: var(--merak-space);
  &-tag {
    display: inline-flex;
    align-items: center;
    & > :not(:first-child) {
      margin-left: var(--merak-button-icon-padding);
    }
    &:first-child {
      width: 100%;
    }
  }
}

.employee-menu {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  width: 100%;
  & > :not(:first-child) {
    margin-top: var(--merak-space);
  }
  &-item {
    padding: 10px 16px;
    border-radius: var(--merak-rounded);
    transition:
      color 0.5s,
      background-color 0.5s;
    cursor: pointer;
    &:hover {
      background-color: var(--el-color-primary-light-9);
    }
    &.employee-menu-active {
      color: white;
      background-color: var(--el-color-primary);
    }
  }
}
</style>
